<template>
  <div class="userManage">
    <!-- 用户列表 -->
    <div class="searchContent">
      <div class="searchBtn">
        <el-select
          v-model="searchInfo.status"
          placeholder="请选择状态"
          class="userType"
          @change="searchUer"
        >
          <el-option label="待审核" value="1"></el-option>
          <el-option label="已审核" value="2"></el-option>
          <el-option label="禁用" value="3"></el-option>
          <el-option label="全部" value=""></el-option>
        </el-select>
        <el-select
          v-model="searchInfo.userType"
          placeholder="请选择身份类型"
          class="userType"
          @change="searchUer"
        >
          <el-option label="老师" value="3"></el-option>
          <el-option label="学生" value="4"></el-option>
          <el-option label="全部" value=""></el-option>
        </el-select>
        <input type="text" v-model="searchInfo.name" placeholder="姓名" />
        <input type="text" v-model="searchInfo.telephone" placeholder="电话" />
        <input
          type="text"
          v-model="searchInfo.departmentId"
          placeholder="组织机构ID"
        />
        <input
          type="text"
          v-model="searchInfo.evaluationId"
          placeholder="关联评分表ID"
        />
        <button @click="searchUer">查询</button>
      </div>
      <div class="inputBtn">
        <button
          v-if="tableData.length > 0"
          class="examine"
          @click="batchExamine"
        >
          批量审核
        </button>
        <button v-if="tableData.length > 0" @click="batchDelete">
          批量删除
        </button>
        <button @click="inputExl">导入</button>
        <button @click="addUser">新增</button>
      </div>
    </div>
    <div class="tableContent">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="{ textAlign: 'center', borderColor: '#E6EBFF' }"
        :header-cell-style="{
          textAlign: 'center',
          background: '#F1F5FF',
          borderColor: '#E6EBFF',
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="60" type="selection"> </el-table-column>
        <el-table-column prop="num" label="序号" width="60"> </el-table-column>
        <el-table-column prop="type" label="身份类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1">系统管理员</span>
            <span v-if="scope.row.type === 2">学校管理员</span>
            <span v-if="scope.row.type === 3">老师</span>
            <span v-if="scope.row.type === 4">学生</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          :show-overflow-tooltip="true"
          width="100"
        >
        </el-table-column>
        <el-table-column label="性别" width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.sex === 1">男</span>
            <span v-if="scope.row.sex === 2">女</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="studentId"
          :show-overflow-tooltip="true"
          label="学号"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="dpname"
          label="组织机构"
          :show-overflow-tooltip="true"
          width="150"
        >
          <template slot-scope="scope">
            <select
              name=""
              id=""
              style="
                width: 100%;
                outline: none;
                border: 0;
                appearance: none;
                text-align: center;
              "
            >
              <option
                v-for="item in scope.row.departmentIdList"
                :key="item.id"
                :value="item.name"
              >
                {{ item.name }}
              </option>
            </select>
            <!-- <span v-for="item in scope.row.departmentIdList" :key="item">
              {{ item.name }}
            </span> -->
          </template>
        </el-table-column>
        <!-- 未改 -->
        <el-table-column
          prop="zip"
          label="关联评分表"
          :show-overflow-tooltip="true"
          width="200"
        >
          <template slot-scope="scope">
            <select
              name=""
              id=""
              style="
                width: 100%;
                outline: none;
                border: 0;
                appearance: none;
                text-align: center;
              "
            >
              <option
                v-for="item in scope.row.score"
                :key="item.scoreId"
                :value="item.scoreName"
              >
                {{ item.scoreName }}
              </option>
            </select>
            <!-- <span v-for="item in scope.row.score" :key="item">
          {{item.scoreName}}
        </span> -->
          </template>
        </el-table-column>
        <el-table-column prop="points" label="等级分数" width="80">
        </el-table-column>
        <el-table-column
          prop="telephone1"
          :show-overflow-tooltip="true"
          label="电话号码"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="birthday"
          label="出生年月"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="idNumber"
          label="身份证号"
          :show-overflow-tooltip="true"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="ethnicGroups"
          :show-overflow-tooltip="true"
          label="民族"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="counselor"
          label="辅导员"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="userStatus" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.userStatus === 1">待审核</span>
            <span v-if="scope.row.userStatus === 2">已审核</span>
            <span v-if="scope.row.userStatus === 3">禁用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="入学时间"
          :show-overflow-tooltip="true"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.enrollmentDate !== null">
              {{ scope.row.enrollmentDate.slice(0, 10) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="lsZk" label="专本科" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.lsZk === 1">专科</span>
            <span v-if="scope.row.lsZk === 2">本科</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="school"
          label="学校"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="qq"
          label="QQ号"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="weChat"
          label="微信号"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="hometown"
          label="籍贯"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="sourceAddr"
          label="生源地"
          :show-overflow-tooltip="true"
          width="120"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
          <template slot-scope="scope">
            <div class="btn">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="top"
              >
                <img
                  src="../../../assets/update.png"
                  alt=""
                  @click="editUserItem(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <img
                  src="@/assets/delete.png"
                  alt=""
                  @click="deleteUserItem(scope.row)"
                />
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="重置密码"
                placement="top"
              >
                <img
                  src="@/assets/resetPWD.png"
                  alt=""
                  @click="updatePwd(scope.row)"
                />
              </el-tooltip>
            </div>
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <!-- <el-pagination layout="prev, pager, next" :total="totalcount"> </el-pagination> -->
      <el-pagination
        v-model="paging"
        background
        layout="prev, pager, next"
        :total="paging.total"
        :page-size="paging.pageSize"
        :current-page="paging.page"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <AddUser ref="child" @getTableData="getTableData"></AddUser>
    <EditUser ref="childEdit"></EditUser>
    <InputExcel ref="childInput" @getTableData="getTableData"></InputExcel>
  </div>
</template>

<script>
import { getAllUser, updatePWD, deleteUser, batchDeleteUser, batchExamineUser } from '@/api/systemManage/user';
import EditUser from './EditUser.vue';
import AddUser from './AddUser.vue';
import InputExcel from './InputExcel.vue';
export default {
  components: { AddUser, EditUser, InputExcel },
  props: ['organizationId'],
  data() {
    return {
      tableData: [],
      paging: {
        page: 1,
        pageSize: 12,
        total: 0,
        userId: 1
      },
      searchInfo: {
        status: '',
        name: '',
        telephone: '',
        userType: '',
        departmentId: null, // 部门id
        evaluationId: null // 评分表id
      },
      selectedUser: []
    };
  },
  methods: {
    handleClick(row) {
      // console.log(row);
    },
    // 获取用户列表
    async getTableData() {
      // this.organizationId = this.$store.state.organizationId;
      // console.log(this.organizationId);
      if (this.organizationId !== null) {
        // this.organizationId = this.$store.state.organizationId;
        // console.log(this.organizationId);
        this.searchInfo.departmentId = this.organizationId;
      }
      const res = await getAllUser({page: this.paging.page, pageSize: this.paging.pageSize, departmentId: this.searchInfo.departmentId});
      // console.log(res);
      if (res.code) {
        this.tableData = res.data;
        // console.log(this.tableData);
        this.paging.total = res.totalcount;
      }
    },
    // 删除用户
    deleteUserItem(val) {
      // console.log(val);
      this.$confirm('确认删除该用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteUser({userId: val.id});
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '删除成功!'
          });
          this.getTableData();
        } else {
          // this.$message.error('删除失败');
          this.$message({
            showClose: true,
            message: '删除失败',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 编辑用户
    editUserItem(val) {
      // console.log(val);
      const data = JSON.stringify(val);
      this.$refs.childEdit.openEdit(data);
    },
    // 分页
    handleCurrentChange(currentPage) {
      // console.log(currentPage);
      this.paging.page = currentPage;
      this.Paging();
      // this.searchList();
    },
    // 点击选择
    handleSelectionChange(val) {
      // this.multipleSelection = val;
      // console.log(val);
      this.selectedUser = val;
    },
    // 点击新增
    addUser() {
      this.$refs.child.openAdd();
    },
    // 点击导入
    inputExl() {
      // console.log(111);
      this.$refs.childInput.openInput();
    },
    // 搜索用户
    async searchUer() {
      // console.log(Number(this.searchInfo.departmentId));
      // console.log(this.searchInfo);
      this.paging.total = 0;
      const res = await getAllUser({page: 1, pageSize: this.paging.pageSize, status: this.searchInfo.status, name: this.searchInfo.name, telephone: this.searchInfo.telephone, type: this.searchInfo.userType, evaluationId: this.searchInfo.evaluationId, departmentId: this.searchInfo.departmentId});
      // console.log(res);
      this.tableData = res.data;
      this.paging.total = res.totalcount;
    },
    // 分页
    async Paging() {
      // console.log(this.searchInfo);
      const res = await getAllUser({page: this.paging.page, pageSize: this.paging.pageSize, status: this.searchInfo.status, name: this.searchInfo.name, telephone: this.searchInfo.telephone, type: this.searchInfo.userType, evaluationId: this.searchInfo.evaluationId, departmentId: this.searchInfo.departmentId});
      // console.log(res);
      this.tableData = res.data;
      this.paging.total = res.totalcount;
    },
    // 重置密码
    async updatePwd(val) {
      // console.log(val);
      // const res = await updatePWD({UserId: val.id});
      // const res = await updatePWD();
      // console.log(res);
      this.$confirm('确认将密码重置为:123456?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await updatePWD({UserId: val.id});
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            showClose: true,
            type: 'success',
            message: '重置成功!'
          });
        } else {
          // this.$message.error('重置失败');
          this.$message({
            showClose: true,
            message: '重置失败',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '已取消重置'
        });
      });
      // this.$confirm('确认重置密码?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(async () => {
      //   const res = await updatePWD({UserId: val.id});
      //   // console.log(res);
      //   if (res.code) {
      //     this.getList();
      //     this.$message({
      //       type: 'success',
      //       message: '重置成功!'
      //     });
      //   } else {
      //     this.$message({
      //       type: 'info',
      //       message: '重置失败'
      //     });
      //   }
      // });
    },
    // batch 批量删除用户
    async batchDelete() {
      // console.log(111);
      // console.log(this.selectedUser);
      let userIdList = [];
      this.selectedUser.filter(item => {
        userIdList.push(item.id);
      });
      // console.log(userIdList);
      const res = await batchDeleteUser(JSON.stringify(userIdList));
      // console.log(res);
      if (res.code === 200) {
        // 删除成功
        this.$message({
          showClose: true,
          type: 'success',
          message: '删除成功!'
        });
        this.getTableData();
      } else {
        // console.log('删除失败');
        this.$message({
          showClose: true,
          message: '删除失败',
          type: 'error'
        });
      }
    },
    // 批量审核
    async batchExamine() {
      // console.log(111);
      // console.log(this.selectedUser);
      // const res = await batchExamine();
      // console.log(res);
      let userIdList = [];
      this.selectedUser.filter(item => {
        userIdList.push(item.id);
      });
      // console.log(userIdList);
      const res = await batchExamineUser(JSON.stringify(userIdList));
      // console.log(res);
      if (res.code === 200) {
        // 删除成功
        this.$message({
          showClose: true,
          type: 'success',
          message: '批量审核成功!'
        });
        this.getTableData();
      } else {
        // console.log('批量审核失败');
        this.$message({
          showClose: true,
          message: '批量审核失败',
          type: 'error'
        });
      }
    }
  },
  created() {
    this.getTableData();
  }
};

</script>
<style scoped lang="less">
.userManage {
  button {
    cursor: pointer;
  }
  .searchContent {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 68px;
    padding: 0 20px;
    .searchBtn {
      input {
        font-size: 14px;
        width: 175px;
        height: 35px;
        background: #ffffff;
        border-radius: 3px;
        border: 1px solid #ccd9f9;
        outline: none;
        outline: none;
        text-align: center;
        margin-left: 10px;
      }
      button {
        font-size: 14px;
        margin-left: 10px;
      }
      .userType {
        width: 175px;
        font-size: 14px;
        margin-left: 10px;
      }
    }
    .inputBtn {
      button {
        margin-left: 10px;
      }
    }
    button {
      width: 100px;
      height: 35px;
      background: #2fc0e0;
      border-radius: 4px;
      color: white;
      box-shadow: 0 0 5px #2fc0e0;
    }
  }
  .tableContent {
    padding: 0 20px;
    // height: 590px;
    // background: white;
    .el-table {
      box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
    }
    /deep/.el-table__body tr,
    /deep/.el-table__body td {
      padding: 0;
      height: 40px !important;
      font-size: 14px;
      color: #555555;
    }
    /deep/.el-table th {
      color: #333333;
      font-family: PingFangSC-Regular, PingFang SC;
      font-size: 14px;
    }
    .btn {
      display: flex;
      justify-content: space-around;
      cursor: pointer;
      img {
        height: 32px;
        width: 32px;
      }
    }
  }
}
.block {
  display: flex;
  justify-content: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}
.el-pagination {
  margin: 20px auto;
  padding-bottom: 20px;
  /deep/.btn-prev {
    width: 32px;
    height: 32px;
    background-color: #faf9ff;
  }
  /deep/.btn-next {
    width: 32px;
    height: 32px;
    background-color: #faf9ff;
  }
}
/deep/.el-icon-arrow-left:before {
  font-size: 20px;
  color: #555555;
}
/deep/.el-icon-arrow-right:before {
  font-size: 20px;
  color: #555555;
}
/deep/.el-pager li {
  width: 32px;
  height: 32px;
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  line-height: 32px;
  border-radius: 50% !important;
  background-color: #faf9ff !important;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%) !important;
  color: #ffffff !important;
  box-shadow: 0px -1px 5px #1160cf, 0px 1px 5px #cd06bf;
}
/deep/ .el-progress-bar__outer {
  background-color: #e8f8fb;
}
/deep/ .el-progress-bar__outer {
  height: 20px !important;
}
/deep/ .el-progress-bar__innerText {
  font-size: 12px;
  font-family: DIN Alternate Bold;
}
/deep/ .el-progress.is-exception .el-progress-bar__inner {
  background-image: linear-gradient(90deg, #2fc0e0);
  text-align: center;
}
/deep/ .el-button--success {
  background-color: #f0fff6;
  border-color: #f0fff6;
}
/deep/ .el-button--success .el-icon-switch-button {
  font-size: 20px;
  color: #59d088;
}

// /deep/ .el-select__caret {
//   transition: none;
//   transform: rotateZ(0deg);
//   margin-right: 5px;
// }
// /deep/ .el-icon-arrow-up::before {
//   content: "";
//   width: 39px;
//   height: 39px;
//   position: absolute;
//   top: 0;
//   left: 0;
//   border-left: 1px solid #ccd9f9;
//   background: url("~@/assets/triangle.png") no-repeat center center;
//   background-size: 12px 21px;
// }
</style>
